<template>
  <div class="main-view">
    <!-- 左右布局 -->
    <div class="p-2" style="border-right: 2px solid #888">
      <div>
        <div @click="toPage('/admin/main/welcome')">首页</div>
        <div>
          <n-collapse>
            <n-collapse-item title="系统查询">
              <div @click="toPage('/admin/main/log')">日志查询</div>
              <div>统计信息</div>
              <div @click="toPage('/admin/main/report')">留言板举报</div>
            </n-collapse-item>
          </n-collapse>
        </div>
      </div>
    </div>

    <!-- 右边是上下布局 -->
    <div>
      <div class="p-2 fs-4 tc" style="border-bottom: 2px solid #888">
        <div><n-gradient-text type="info">后台管理简易版本</n-gradient-text></div>
      </div>
      <div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { NCollapse, NCollapseItem, NGradientText } from 'naive-ui'
import { useRouter } from 'vue-router'
const router = useRouter()
const toPage = (url: string) => {
  router.push(url)
}
</script>

<style scoped lang="scss">
.main-view {
  display: flex;
  height: 100vh;
  > div:last-of-type {
    flex: 1;
    display: flex;
    flex-direction: column;
    > div:last-of-type {
      flex: 1;
      overflow-y: auto;
    }
  }
  > div:first-of-type {
    width: 10rem;
  }
}
</style>
